<template>
  <BasicTabs
    class="material-setting"
    v-model="tabId"
    :tabs="list"
    type=""
    @tabChange="tabsChange"
  ></BasicTabs>
</template>

<script setup lang="ts">
  import { TabPaneItem } from '@/components/ui/basic-tabs/types'
  import MaterialSettingTabComponents from './materialSettingTabComponents.vue'

  const props = defineProps<{
    listArr: any
  }>()

  watch(
    () => props.listArr,
    (val) => {
      if (val && val.length != 0) {
        tabId.value = val[0].id
        list.value = val.map((item) => {
          return {
            name: item.id,
            label: item.name,
            isFit: true,
            slots: {
              default: () =>
                h(MaterialSettingTabComponents, {
                  id: tabId.value,
                  code: String(item.order),
                  name: item.name
                })
            }
          }
        })
      }
    },
    { immediate: true, deep: true }
  )

  const list = shallowRef<TabPaneItem[]>([])
  const tabId = ref('')

  const tabsChange = (tab) => {
    console.log(tab)
  }
</script>
